import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import {reqcartlist,reqcartdelete,reqcartedit} from '../../request/api'
import { Image,List,Button,Toast,Empty } from 'antd-mobile'
import {imgPre, get} from "../../request/http"
import './Shop.less'
import {filterPrice} from "../../filters/index"

export default class Shop extends Component {
    constructor(){
        super();
        this.state={
            shoplist:[],
            isshow:false,
            allCheck:false,
            money:0
        }
    }
    componentDidMount(){
        let obj =sessionStorage.getItem("isLogin");
        let objp = JSON.parse(obj);

        reqcartlist({uid:objp.uid}).then(d=>{
            let arr = d.data.list[1];
            let arrNew = arr.content
            
            arrNew.forEach(item => {
                item.checkeds = false
            })
            
            if(d.data.code===200){
                this.setState({
                    shoplist:arrNew
                })
            }
        })
    }
    //删除
    dele=(e,id)=>{
        e.stopPropagation();
        reqcartdelete({id}).then(d=>{
            if(d.data.code===200){
                let obj =sessionStorage.getItem("isLogin");
                let objp = JSON.parse(obj);

                reqcartlist({uid:objp.uid}).then(d=>{
                    let arr = d.data.list[1];
                    let arrNew = arr.content
                    
                    arrNew.forEach(item => {
                        item.checkeds = false
                    })
                    
                    if(d.data.code===200){
                        this.setState({
                            shoplist:arrNew
                        })
                    }
                })
            }
        })
    }
//减少
    numde=(e,id,num)=>{
        e.stopPropagation();
        if(num<=1){
            Toast.show({
                content:"不能再少了"
            })
            return;
        }
        reqcartedit({id,type:1}).then(d=>{
                if(d.data.code===200){
                    let obj =sessionStorage.getItem("isLogin");
                    let objp = JSON.parse(obj);

                    reqcartlist({uid:objp.uid}).then(d=>{
                        let arr = d.data.list[1];
                        let arrNew = arr.content
                        
                        arrNew.forEach(item => {
                            item.checkeds = false
                        })
                        
                        if(d.data.code===200){
                            this.setState({
                                shoplist:arrNew
                            })
                        }
                    })
                }
            })
    }
    //增加
    numadd=(e,id)=>{
        e.stopPropagation();
        reqcartedit({id,type:2}).then(d=>{
            if(d.data.code===200){
                let obj =sessionStorage.getItem("isLogin");
                let objp = JSON.parse(obj);

                reqcartlist({uid:objp.uid}).then(d=>{
                    let arr = d.data.list[1];
                    let arrNew = arr.content
                    
                    arrNew.forEach(item => {
                        item.checkeds = false
                    })
                    
                    if(d.data.code===200){
                        this.setState({
                            shoplist:arrNew
                        })
                    }
                })
            }
        })
    }
    //多选
    checkchange=()=>{
        let arr = this.state.shoplist
        if(this.state.allCheck){
            this.setState({
                allCheck:false
            })
            arr.forEach(item => {
                item.checkeds=false
            })
        }else{
            this.setState({
                allCheck:true
            })
            arr.forEach(item => {
                item.checkeds=true
            })
        }
        
        
    }
    //显示删除按钮
    delBshow=()=>{
        if(this.state.isshow){
            this.setState({
                isshow:false
            })
        }else{
            this.setState({
                isshow:true
            })
        }
        
    }
    //全选
    cc(e,id,checked){
        let arr = this.state.shoplist
        arr.forEach(item=>{
            if(item.id===id){
                item.checkeds=!checked
            }
        })
        
        if(arr.every(item=>item.checkeds)){
            this.setState({
                ...arr,
                allCheck:true
            })
        }else{
            this.setState({
                ...arr,
                allCheck:false
            })
        }

        this.setState({
            ...arr
        })

    }
    render() {
        let {shoplist,isshow,allCheck,money}=this.state;
        
        return (
            <div>
                <Header title="购物车" back></Header>
                <div className="shop">
                    <div className="checkc">
                        <input type="checkbox" onChange={this.checkchange} checked={allCheck}/>
                        <Button onClick={this.delBshow}>操作</Button>
                    </div>
                    <div>
                    {
                        shoplist.length>0?<div>
                            {shoplist.map((item,index) => (
                            <List.Item
                                onClick={key=>{this.props.history.push("/Detail/"+item.id)}}
                                key={item.id}
                                prefix={
                                    <Image
                                    src={imgPre+item.img}
                                                fit='cover'
                                                width={80}
                                                height={80}
                                                />
                                            }
                                            description={item.description}
                                            >
                                            <div onClick={e=>e.stopPropagation()}>
                                                <input type="checkbox" onChange={(e)=>(this.cc(e,item.id,item.checkeds))} checked={item.checkeds}/>
                                            </div>
                                            {item.goodsname}
                                            <div>
                                                <span>价格：{item.price}</span>
                                            </div>
                                            <Button color='danger' style={{display:isshow?"block":"none"}} onClick={(e)=>{this.dele(e,item.id)}}>删除</Button>
                                            <div className="money">
                                                <button onClick={(e)=>{this.numde(e,item.id,item.num)}}>-</button>
                                                <span>{item.num}</span>
                                                <button onClick={(e)=>{this.numadd(e,item.id)}}>+</button>
                                            </div>
                                            </List.Item>
                                        ))
                                    }
                        </div>: <Empty description='暂无数据' />
                    }
                    </div>
                    
                </div>
                <div className="jiesuan">
                    <div>
                        {

                            shoplist.map(item=>{
                                if(item.checkeds === true){
                                    money+=item.num*item.price;
                                }
                            })
                            
                        }
                        {money?"￥"+filterPrice(money):"￥0.00"}
                    </div>
                    <Button>结算</Button>
                </div>
            </div>
        )
    }
}
